@charset "UTF-8";


/*	Basic Style
----------------------------------------------------------------------------- */
:root{ --breakpoint-xs: 0; --breakpoint-sm: 650px; --breakpoint-md: 810px;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*,
*::before,
*::after {
  box-sizing: border-box; color:#000
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	font: 100% Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100% ;

}

#body { background: #fff; }

/*	Header
----------------------------------------------------------------------------- */
.header-flex           { display: flex; justify-content: center; }
#header			       { width: 100%; background: #FFFF; display: flex; justify-content: space-between; }


#header .logo-c        { display:flex; justify-content: center; }
#header .logo-t        { font-weight: bold; text-align: center; }
#header .logo-t a      { display: block; text-decoration: none; }
#header .site-name     { display: block; text-indent: -9999px; overflow: hidden; }
#header .site-name a   { display: block; text-align: center; }
#header .site-name img { width: 100%; height: auto; display: block;}

#header .tel           { display: flex; justify-content: center; display: block; }
#header .head-info-tel { color:#1D2878; font-weight: bold; background: url('../images/common/TEL.png')no-repeat 7px; text-align: right;
		                 display: block; border:2px solid #1D2878; mask-border: 2px solid #1D2878; -moz-border-image: 2px solid #1D2878; -o-border-image:2px solid #1D2878; }
#header .info-1        { background-color:#1D2878 ; color: #fff; display: block;text-align: center; }

#header .fax           { display: flex; justify-content: center; display: block; }
#header .head-info-fax { color:#1D2878 ; font-weight: bold; background: url('../images/common/FAX.png')no-repeat 5px; text-align: right;	
	                      display: block; border: 2px solid #1D2878; mask-border: 2px solid #1D2878; -moz-border-image: 2px solid #1D2878; -o-border-image:2px solid #1D2878; }
#header .info-2        { background-color:#1D2878 ; color: #fff; display: block; text-align: center; }
@media(min-width:1700px){ 
	#header                { max-width: 1600px; height: 90px; margin:0; }
	#header .logo          { width: 160px; margin: 10px 0; }
	#header .logo-t        { width: 160px; font-size: 14px; margin-top: -5px; }
	#header .site-name img { width: 160px; height: 103px; }
	#header .head-info-tel { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-1        { width: 220px; height: 18px; font-size: 12px; }
	#header .head-info-fax { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-2        { width: 220px; height: 18px; font-size: 12px; }
}
@media(max-width:1700px){
	#header                { width: 100%; height: 90px; margin: 0 20px 0 55px; }
	#header .logo          { width: 160px; margin: 10px 0; }
	#header .logo-t        { width: 160px; font-size: 14px; margin-top: -5px; }
	#header .site-name img { width: 160px; height: 103px; }
	#header .head-info-tel { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-1        { width: 220px; height: 18px; font-size: 12px; }
	#header .head-info-fax { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-2        { width: 220px; height: 18px; font-size: 12px; }
}
@media(min-width:870px){ 
	#header                { width: 100%; height: 90px; margin: 0 20px 0 55px; }
	#header .head-info     { width: 450px; display: flex; justify-content: space-around; margin: 40px 0 0; }
	#header .logo          { width: 160px; margin: 10px 0; }
	#header .logo-t        { width: 160px; font-size: 14px; margin-top: -5px; }
	#header .site-name img { width: 160px; height: 103px; }
	#header .head-info-tel { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-1        { width: 220px; height: 18px; font-size: 12px; }
	#header .head-info-fax { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-2        { width: 220px; height: 18px; font-size: 12px; }
}
@media(max-width:870px){ 
	#header                { width: 100%; height: 90px; margin: 0 20px 0 55px; }
	#header .head-info     { width: 450px; display: flex; justify-content: space-around; margin: 20px 0 0;}
	#header .logo          { width: 160px; margin: 10px 0; }
	#header .logo-t        { width: 160px; font-size: 14px; margin-top: -5px; }
	#header .site-name img { width: 160px; height: 103px; }
	#header .head-info-tel { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-1        { width: 220px; height: 18px; font-size: 12px; }
	#header .head-info-fax { width: 220px; height: 40px; font-size: 28px; padding: 5px; }
	#header .info-2        { width: 220px; height: 18px; font-size: 12px; }
}
@media(max-width:700px){
	#header                { width: 100%; height: 90px; margin: 2% 2% 2% 55px; }
	#header .head-info     { width: 50%; display: flex; justify-content: center; margin: 1% 0 0; display: block; }
	#header .logo          { width: 160px; margin: 10px 0; }
	#header .logo-t        { width: 160px; font-size: 14px; margin-top: -5px; }
	#header .site-name img { width: 160px; height: 103px; }
	#header .head-info-tel { width: 100%; height: auto; font-size: 5.5vw; padding: 1%; }
	#header .info-1        { width: 100%; height: auto; font-size: 2vw; }
	#header .head-info-fax { width: 100%; height: auto; font-size: 5.5vw; padding: 1%; }
	#header .info-2        { width: 100%; height: auto; font-size: 2vw; }
}
@media(max-width:500px){
	#header                { width: 100%; height: 90px; margin: 2% 2% 2% 0; }
	#header .logo          { width: 40%; margin: 2% 2% 0 55px; }
	#header .logo-t        { width: 100%; font-size: 2.8vw; margin: 0; }
	#header .site-name img { width: 100%; height: auto; margin: 0; }
}



/*	Nav
----------------------------------------------------------------------------- */
#nav					{ height: 60px; border-bottom: 15px solid #E70113; padding-top: 10px; margin-top:10px ; }
.nav-unshown            { display:none; }				  
@media(min-width:1050px){
	#nav                { padding-left: 28%; }
	#nav-content	    { width: 730px; margin: 0; display: flex; flex-direction: row; padding-bottom: 20px; }
	#nav-content:before { content: "."; display: block; clear: both; visibility: hidden; }
	#nav-content li			{ height: 25px ; display: block; border-left: 2px solid #E70113; }
    #nav-content li:last-of-type { border-right: 2px solid #E70113; }
    #nav-content li a 		{ width: 180px; height: 50px; font-size: 15px; display: block; text-align: center; text-decoration: none; color: #000; font-weight: bold; }			  
    #nav-content li a:hover { width: 184px; height: 50px; font-size: 15px;  border-bottom: 15px solid #1D2878; display: block; text-align: center; color: black; font-weight: bold; margin: 0 -2px; }	
}
@media(max-width:1050px){		  
	#nav-open           { display: block; width: 28px; height: 28px; vertical-align: middle; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border: 2px solid #E70113; mask-border: 2px solid #E70113; -moz-border-image: 2px solid #E70113; -o-border-image: 2px solid #E70113; padding: 4px; z-index: 2; margin: 0 15px;}
	#nav-open span, 
	#nav-open span:before, 
	#nav-open span:after  { position: absolute; height: 2px; width: 16px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; background: #E70113; display: block; content: ''; cursor: pointer; }
	#nav-open span:before { bottom: -7px; }
	#nav-open span:after  { bottom: -14px; }
	#nav-close            { display: none; position: absolute; width: 728px; height: 100px; background: black;opacity: 0; transition: .3s ease-in-out; }
	#nav-content          { overflow:hidden; position: absolute; z-index: 1; width: 728px; max-width: 728px; background: #ffe6f5; transition: .3s ease-in-out; visibility: hidden; margin: 22px 0 0;}
	#nav-input:checked ~ #nav-close   { visibility: visible; display: block; }
	#nav-input:checked ~ #nav-content { visibility: visible; }

	#nav-content li			{ height: 30px; float: left; display: block; border-right: 1px solid #E70113; padding: 3px 0;color:#1D2878; }
	#nav-content li:last-of-type{ border-right:none; }
    #nav-content li a 		{ width: 180px; height: 30px; font-size: 15px; display: block; text-align: center; text-decoration: none; font-weight: bold; }			  
    #nav-content li a:hover { width: 180px; height: 30px; font-size: 15px; display: block; text-align: center; color: #e70113; font-weight: bold; }	
}
@media(max-width:730px){		  
  #nav-open           { display: block; width: 28px; height: 28px; vertical-align:center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border-bottom: 2px solid #E70113; padding: 4px; z-index: 2; margin: 0 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; }
  #nav-open span, 
  #nav-open span:before, 
  #nav-open span:after  { position: absolute; height: 2px; width: 16px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; display: block; content: ''; cursor: pointer; }
  #nav-open span:before { bottom: -7px; }
  #nav-open span:after  { bottom: -14px; }
  #nav-close            { display: none;  width: 100%; height: 100px; background: black; opacity: 0; transition: .3s ease-in-out;}
  #nav-content          { overflow:hidden; position: absolute; z-index: 1;width: 182px; max-width: 182px; transition: .3s ease-in-out; visibility: hidden; margin: 22px 0 0;}
  #nav-input:checked ~ #nav-close   { visibility: visible; display: block; }
  #nav-input:checked ~ #nav-content { visibility: visible; }

  #nav-content li			{ height: 30px; float: left; display: block; border-bottom: 1px solid #000; border-right: none; padding: 3px 0; }
  #nav-content li:last-of-type{ border-right: none;}
  #nav-content li a 		{ width: 180px; height: 30px; font-size: 15px; display: block; text-align: center; text-decoration: none; font-weight: bold; }			  
  #nav-content li a:hover { width: 180px; height: 30px; font-size: 15px; display: block; text-align: center; color: #e70113; font-weight: bold; }	
}

/* top */



/*	Wrap & Page
----------------------------------------------------------------------------- */
/* wrap */
#wrap		{ display: flex; justify-content: center; padding-bottom: 20px; }

/* page */
#page			{ width: 100%; padding: 10px 25px; }

@media(min-width:1700px){
	#page       { max-width: 1600px; display: flex; justify-content: center;  }
}
@media(max-width:1700px){
	#page       { width: 990px;display: flex; justify-content: center; }
}
@media(max-width:990px){
	#page       { width: 580px; display: flex; flex-wrap: wrap-reverse; }
}
/*#page a:link	{ color: #166599; }
#page a:visited	{ color: #55799b; }*/


/*	Content
----------------------------------------------------------------------------- */
#content         {width: 100%; display: flex; justify-content: center; }
@media(min-width:1700px){
	#content     { max-width: 1290px; } 
}
@media(max-width:1700px){
	#content     { width: 100%; }
}

/*	Aside
----------------------------------------------------------------------------- */

/* aside-menu */

#aside #aside-menu		                  { margin: 20px 0 30px; display: block; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; background-color: #ffe6f5; }
#aside #aside-menu h1	                  { height: 50px; line-height: 50px; display: block; border-bottom: 2px solid #E70113; border-top-right-radius: 3px; border-top-left-radius: 3px; padding: 0 15px; font-size: 20px; color: #fff; background-color: #e70113;}
#aside #aside-menu h2                     { height: 40px; line-height: 40px; font-size: 16px; font-weight: bolder; color:#e70113; padding: 0 15px; }
#aside #aside-menu .menu                  { background-color: #ffe6f5; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; z-index: 10; }
#aside #aside-menu .menu div              { border-bottom: 1px solid #fff; }
#aside #aside-menu .menu div:last-of-type { border: none; }
#aside #aside-menu .menu div ul	    	  { list-style-type: none; }
#aside #aside-menu .menu div ul li        { height: 40px; line-height: 40px; text-decoration: none; font-weight: bolder; }
#aside #aside-menu .menu div ul li a			{ background: url('../images/common/arrow-cont-right.gif') no-repeat 0 17px; padding-left: 10px; display: block; text-decoration: none; color: #666;  }
#aside #aside-menu .menu div ul p span.note   { font-size: 12px; color:#666; }
#aside #aside-menu .menu div ul li:hover        { height: 40px; background-color: #fff; }
#aside #aside-menu .menu #this                  { background-color: #fff; }  

@media(min-width:990px){ 
	#aside                                          { width: 260px; margin-top: 20px; }
	#aside #aside-menu h1                           { width: 260px; }
	#aside #aside-menu                              { width: 260px; } 
	#aside #aside-menu .menu div ul li              { width: 260px; font-size: 16px; padding: 0 15px; }
	#aside #aside-menu .menu div ul .br             { height: 40px; line-height: 40px; width: 260px; font-size: 16px; padding: 0 15px; }
	#aside #aside-menu .menu div ul .br span.note	{ font-size: 12px; }
	#aside #aside-menu .menu #this                  { width: 260px; }
}
@media(max-width:990px){
	#aside                                          { width: 520px; margin: 0 50px; }
	#aside #aside-menu                              { width: 520px; margin-bottom: 30px; } 
	#aside #aside-menu h1                           { width: 520px; }
	#aside #aside-menu .menu div ul                 { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap:wrap; }
	#aside #aside-menu .menu div ul li              { width: 260px; font-size: 16px; padding: 0 15px; }
	#aside #aside-menu .menu div ul .br             { height: 40px; line-height: 40px; width: 260px; font-size: 16px; padding: 0 15px; }
	#aside #aside-menu .menu div ul li:hover        { width: 260px; }
	#aside #aside-menu .menu div ul .br span.note   { font-size: 12px; }	
	#aside #aside-menu .menu #this                  { width: 260px; }
}
@media(max-width:605px){
	#aside                                          { width: 100%; margin: 0 20px; }
	#aside #aside-menu                              { width: 100%; margin-bottom: 30px; } 
	#aside #aside-menu h1                           { width: 100%; }
	#aside #aside-menu .menu div ul li              { width: 50%; font-size:3.5vw; padding: 0 2%; }
	#aside #aside-menu .menu div ul .br             { height: 40px; line-height: 20px; width: 50%; font-size:3.5vw; padding: 0 2%; }
	#aside #aside-menu .menu div ul li:hover        { width: 50%; }
	#aside #aside-menu .menu div ul .br span.note   { line-height: 10px; font-size: 2vw; }	
	#aside #aside-menu .menu div ul .br span.note::before{ content:"\A"; white-space: pre; }
	#aside #aside-menu .menu #this                  { width: 50%; }
}

/* aside-info */
#aside #aside-notice { border: 2px solid #1D2389; mask-border: 2px solid #1D2389; -moz-border-image: 2px solid #1D2389; -o-border-image: 2px solid #1D2389 ; margin: 20px 0; border-radius: 5px; }
#aside #aside-notice ul { margin: 8px 15px; list-style: none;; }
#aside #aside-notice ul li { color:#1D2389; font-size: 13px; padding: 3px 0; font-weight: bolder; }
#aside-info { background: #eee; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; padding: 10px 5px 10px; }
#aside .adress{ padding: 0 10px;}
#aside-info .company-name { font-weight: bold; padding: 2px 0; text-align: center }
#aside .telfax   { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap:wrap; }
#aside .telfax p { padding: 0 10px; display: block;}
#aside-info ul		{ display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -ms-flex-wrap: wrap; list-style-type: none; }
#aside-info ul li	{ background: #fff; font-size: 14px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; text-decoration: none; }
#aside-info ul li a	{ background: url('../images/common/arrow-cont-right.gif') no-repeat 0 7px; padding-left: 10px; display: block; }
@media(min-width:990px){
	#aside-notice { width: 260px; }
	#aside-info{ font-size: 14px;}
	#aside-info .company-name { font-size: 15px; }
	#aside-info ul li { width: 230px; margin: 5px 10px 0; padding:5px 10px 3px; }
}
@media(max-width:990px){
	#aside-info .company-name { font-size: 16px; }
	#aside-info ul li { width: 235px; margin: 5px 10px 0; padding:5px 10px 3px;}
}
@media(max-width:605px){
	#aside-notice { width: 100%; }
	#aside-info ul li { width: 45%; margin: 1% 2% 0; padding:1% 2% 1%; }
}


/*	Footer
----------------------------------------------------------------------------- */
#footer { height: 100%; background: #eee; }

#footer .pagetop        { width: 100%; height: 40px;  border-bottom: 15px solid #e70113; text-align: right; background: #fff; padding: 0 20px; margin: 0; }
#footer .pagetop a		{ color: #E70113; display: block; }

#footer .foot-div		{ font-size: 11px; display: flex; justify-content: center; }

#footer .foot-div .section-foot .foot-nav					{ float: left; margin: 30px 10px;}
#footer .foot-div .section-foot .foot-nav ul				{ list-style-type: none; display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap:wrap; }
#footer .foot-div .section-foot .foot-nav ul li			{ border-right: 1px solid #ccc;display: inline-block; display: inline; padding-right: 5px; margin-right: 5px; }
#footer .foot-div .section-foot .foot-nav ul li.last-child{ border-right: 0; margin-right: 0; padding-right: 0; }
#footer .foot-div .section-foot .foot-nav a:link			{ color: #166599; }
#footer .foot-div .section-foot .foot-nav a:visited		{ color: #0000; }
#footer .foot-div .section-foot .copyright	{ float: right; color: #666; padding: 10px 10px 10px; }

@media(min-width:1700px){
	#footer .section-foot { width: 1600px; display: block; }
}
@media(max-width:1700px){
	#footer .section-foot { width: 100%; display: block; }
}


/*	Default Style Reset
----------------------------------------------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
header, footer, section, article, nav, aside { margin: 0; padding: 0; }
fieldset, img { border: 0; }

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select { *font-size: 100%; }
select option { padding : 0 5px; }